* {  /* 全局样式重置 */
    margin: 0;
    padding: 0;
    font-size: 1.03rem;  /* 基础字体大小 */
    line-height: 1.53;    /* 行高 */
    box-sizing: border-box;  /* 盒模型 */
    overflow-wrap: break-word;  /* 单词换行 */
    word-break: break-word;   /* 断词处理 */
}

body {  /* 主体样式 */
    background: rgba(250, 248, 242, 1);  /* 浅色背景 */
    color: hsl(30, 5%, 22%);  /* 文字颜色 */
    transition: background 0.3s, color 0.3s;  /* 颜色过渡动画 */
    overflow-x: hidden;  /* 隐藏横向滚动 */
}
body.night_mode {  /* 夜间模式 */
    background: rgba(18, 22, 30, 1);  /* 深色背景 */
    color: hsl(220, 15%, 92%);  /* 浅色文字 */
}

.card.night_mode span {  /* 夜间模式span */
    color: hsl(220, 15%, 92%); 
}

.back {  /* 背面容器 */
    min-height: 50rem;  /* 最小高度 */
    position: relative;  /* 相对定位 */
    overflow: auto;      /* 允许滚动 */
    padding-bottom: 2rem;  /* 底部内边距 */
}

.card {  /* 卡片基础样式 */
    position: relative;  /* 相对定位 */
    overflow: hidden;    /* 隐藏溢出 */
}
.card p {  /* 段落 */
    text-align: justify;  /* 两端对齐 */
}
.card i {  /* 斜体重置 */
    font-style: normal;  /* 取消斜体 */
}
.card hr {  /* 水平线 */
    border: none;  /* 无边框 */
    margin: 0.25rem 0;  /* 上下边距 */
    height: 1px;  /* 高度 */
    background: rgba(200, 195, 185, 0.4);  /* 浅色背景 */
    border-radius: 0.15rem;  /* 圆角 */
}
.card.night_mode hr {  /* 夜间模式水平线 */
    background: rgba(65, 70, 80, 0.4);  /* 深色背景 */
}

.card pre {  /* 预格式化文本 */
    border-radius: 0.15rem;  /* 圆角 */
    transition: color 0.3s;  /* 颜色过渡 */
    white-space: pre-wrap;   /* 保留空格并换行 */
    padding: 0.15rem;        /* 内边距 */
    background: rgba(240, 235, 245, 0.5);  /* 半透背景 */
}
.card.night_mode pre {  /* 夜间模式预格式 */
    background: rgba(30, 35, 50, 0.5);  /* 深色半透背景 */
}

.card ul {  /* 无序列表 */
    list-style: none;  /* 清除默认样式 */
    display: inline-flex;  /* 行内弹性布局 */
    flex-wrap: wrap;      /* 允许换行 */
    gap: 0.1rem;          /* 元素间距 */
    max-width: 100%;      /* 最大宽度 */
}

.card ul li {  /* 列表项 */
    padding: 0.1rem 0.05rem 0.05rem 0.25rem;  /* 内边距 */
    border-radius: 0.15rem;  /* 圆角 */
    width: auto;      /* 自动宽度 */
    background-color: rgba(235, 220, 255, 0.5);  /* 半透背景 */
}
.card ul li.zd {  /* 特殊列表项样式 */
    border-bottom: 1px dashed rgba(160, 140, 200, 0.9);  /* 底部虚线 */
}

.card.night_mode ul li {  /* 夜间模式列表项 */
    background-color: rgba(70, 50, 120, 0.5);  /* 深色背景 */
}
.card.night_mode ul li.zd {  /* 夜间模式特殊项 */
    border-bottom: 1px dashed rgba(120, 100, 160, 0.9);  /* 深色虚线 */
}

.card ul.g {  /* 网格布局列表 */
    display: grid;  /* 网格布局 */
    grid-template-columns: auto auto;  /* 两列自适应 */
    gap: 0.1rem;  /* 网格间隙 */
    width: 100%;  /* 全宽 */
}

.card ul.g.g3 {  /* 三列网格 */
    grid-template-columns: auto auto auto;  /* 三列自适应 */
}

.card ul.g > li {  /* 网格项 */
    word-break: break-word;  /* 允许断词 */
}

.card ul.g > li.zd {  /* 网格特殊项 */
    border-bottom: 1px dashed rgba(160, 140, 200, 0.9);  /* 底部虚线 */
}
.card.night_mode ul.g > li.zd {  /* 夜间模式 */
    border-bottom: 1px dashed rgba(120, 100, 160, 0.9);  /* 深色虚线 */
}

/* 网格布局跨度类 */
[class*="r"], [class*="c"], [class*="o"], [class*="f"] {  /* 通用网格类 */
    grid-row: span 1;  /* 行跨度 */
    grid-column: span 1;  /* 列跨度 */
    border-radius: 0.15rem;  /* 圆角 */
}
[class*="r2"] { grid-row: span 2; }  /* 跨2行 */
[class*="r3"] { grid-row: span 3; }  /* 跨3行 */
/* 其他跨度类省略 */

/* 颜色系统 */
.red, .yg-red { color: hsl(3, 70%, 35%); }  /* 红色系 */
.card.night_mode .red, .card.night_mode .yg-red {  
    color: hsl(5, 85%, 75%);  /* 夜间模式亮红色 */
}

.yellow, .yg-yellow { color: hsl(40, 65%, 38%); }  /* 黄色系 */
.card.night_mode .yellow, .card.night_mode .yg-yellow {  
    color: hsl(45, 85%, 70%);  /* 夜间模式亮黄色 */
}

.blue, .yg-blue { color: hsl(215, 45%, 48%); }  /* 蓝色系 */
.card.night_mode .blue, .card.night_mode .yg-blue {  
    color: hsl(215, 65%, 73%);  /* 夜间模式亮蓝色 */
}

.green, .yg-green { color: hsl(145, 50%, 35%); }  /* 绿色系 */
.card.night_mode .green, .card.night_mode .yg-green {  
    color: hsl(140, 40%, 60%);  /* 夜间模式亮绿色 */
}

img, .mermaid {  /* 图片和图表通用样式 */
    max-width: 100%;  /* 最大宽度限制 */
    border-radius: 0.15rem;  /* 圆角 */
    box-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.05);  /* 阴影 */
    transition: filter 0.3s;  /* 滤镜过渡 */
    height: auto;  /* 高度自适应 */
    display: block;  /* 块级显示 */
}
.mermaid {  /* Mermaid图表特殊样式 */
    padding: 0.1rem;  /* 内边距 */
    background: rgba(240, 235, 245, 0.5);  /* 半透背景 */
}
.card.night_mode .mermaid {  /* 夜间模式图表 */
    filter: brightness(0.9) contrast(0.95);  /* 亮度和对比度调整 */
    background: rgba(30, 35, 50, 0.5);  /* 深色背景 */
}

.drag-mask {  /* 遮罩层样式 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: 0;  /* 左侧对齐 */
    width: 100%;  /* 全宽 */
    height: 100%;  /* 全高 */
    padding: 0.1rem;  /* 内边距 */
    background: rgba(250, 248, 242, 1);  /* 背景色 */
    transition: background 0.3s;  /* 背景过渡 */
    border-top: 1px solid rgba(100, 100, 100, 1);  /* 顶部边框 */
    overflow: hidden;  /* 隐藏溢出 */
    border-radius: 0.15rem;  /* 圆角 */
}
.card.night_mode .drag-mask {  /* 夜间模式遮罩 */
    background: rgba(18, 22, 30, 1);  /* 深色背景 */
}

.hidden { display: none; }  /* 隐藏类 */
.btm { opacity: 0.5; }  /* 底部信息半透明 */